<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="edu.uclm.esi.tysw.tusEntradas.domain.Butaca, java.util.ArrayList, edu.uclm.esi.tysw.tusEntradas.domain.Recintos,
	java.util.ArrayList,org.json.simple.JSONObject, org.json.simple.parser.JSONParser, org.json.simple.parser.ParseException" %>
<!DOCTYPE html">
<%@ taglib prefix="s" uri="/struts-tags"%>

<html>
<link rel="stylesheet" type="text/css" media="all" href="css/estilos.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/backgrounds.css" />

<head>
	<%-- <meta equiv="Pragma" content="no-cache"/>
	<meta http-equiv="Expires" content="-1">--%>
	<script type="text/javascript" src="scripts/GuardarButacas.js"></script>
	<script>
	
		function isNumberKey(evt)
	    {
	    	var charCode = (evt.which) ? evt.which : event.keyCode;
	    	if (charCode > 31 && (charCode < 48 || charCode > 57))
	    		return false;
	
	    	return true;
	    }
	 
   		function seleccionTamanio(val)
   		{
   			document.getElementById("tablaOpciones").hidden = true;
   			switch(val){
   				case "-1":
   					limpiarDatosButacas();
   					document.getElementById("recPersonalizado").hidden=true;
   					borrarRecinto();
   					break;
   				case "0":
   					limpiarDatosButacas();
   					document.getElementById("recPersonalizado").hidden=true;
   					pintarRecinto("20","20");
   					break;
   				case "1":
   					limpiarDatosButacas();
   					document.getElementById("recPersonalizado").hidden=false;
   					borrarRecinto();
   					document.getElementById("filasRecinto").value = "";
   	   				document.getElementById("columnasRecinto").value = "";
   					break;
   			}
   		}
   		
   		function pintarRecinto(filas, columnas)
   		{
   			if (document.getElementById("tablaRecinto").hasChildNodes()) {
   				borrarRecinto();
   			}
   			 
   			if (filas == 0 && columnas == 0) {
   				filas = document.getElementById("filasRecinto").value;
   				columnas = document.getElementById("columnasRecinto").value;
   			} else {
   				document.getElementById("filasRecinto").value = filas;
   				document.getElementById("columnasRecinto").value = columnas;
   			}
   			 
   			if (filas != "" && columnas != "") {
   				var filasInt = parseInt(filas);
   	   			var columnasInt = parseInt(columnas);
   	   			
   				document.getElementById("tablaRecinto").border = 4;
   				document.getElementById("tablaRecinto").borderColor = "Black";
   				
   				var numero = 1;
   				
   				for (var i = 0; i < filasInt; i++) {
   					var nuevaFila = document.createElement("tr");
   					nuevaFila.id = "fila_" + i;
   					 
   					for (var j = 0; j < columnasInt; j++) {
   						var nuevaCelda = document.createElement("td");
   						nuevaCelda.id = "celda_" + i + "_" + j;
   						
   						var imgCeldaVacia = document.createElement("img");
   		   				imgCeldaVacia.src = "./imagenes/recintos/celdaVacia.png";
   		   				imgCeldaVacia.id = "img_celda_" + i + "_" + j; 
   		   				imgCeldaVacia.style.cursor = 'pointer';
   		   				imgCeldaVacia.name = numero.toString();
   						numero = numero + 1;
   		   				nuevaCelda.appendChild(imgCeldaVacia);
   						
   						var clickEvt = " onclick=habilitarAltaElemento(this.id)>";
   						var fin = nuevaCelda.innerHTML.indexOf('>');
   						var finalHTML = nuevaCelda.innerHTML.substr(0, fin) + clickEvt;
   						nuevaCelda.innerHTML = finalHTML;
   						 
   						nuevaFila.appendChild(nuevaCelda);
   					}   
   					
   					document.getElementById("tablaRecinto").appendChild(nuevaFila);
   				}
   				 
   				document.getElementById("regionRecinto").hidden = false;
   			}
   			
   		}
   		
   		function borrarRecinto()
   		{
   			for (var i = document.getElementById("tablaRecinto").rows.length - 1; i >= 0; i--) {
   				for (var j = document.getElementById("tablaRecinto").rows[i].cells.length - 1; j >= 0; j--) {
   					var hijosCol = document.getElementById("tablaRecinto").rows[i].cells[j];
   					while (hijosCol.firstChild) {
   						hijosCol.removeChild(hijosCol.firstChild);
   					}
   	   			}
   				var hijosFil = document.getElementById("tablaRecinto").rows[i];
				while (hijosFil.firstChild) {
					hijosFil.removeChild(hijosFil.firstChild);
				}
   			}
   			var hijosTab = document.getElementById("tablaRecinto");
			while (hijosTab.firstChild) {
				hijosTab.removeChild(hijosTab.firstChild);
			}
   		}
   		
   		function habilitarAltaElemento(elementoId)
   		{
   			var elemSeleccionado = false;
   			var imgActualId = "";
   			if (document.getElementById(elementoId).src.indexOf('butaca.png') <= 0 && document.getElementById(elementoId).src.indexOf('celdaNoDisponible.png') <= 0){
	   			for (var i = 0; i < document.getElementById("tablaRecinto").rows.length; i++) {
	   				for (var j = 0; j < document.getElementById("tablaRecinto").rows[i].cells.length; j++) {
	   					var imgActual = document.getElementById("tablaRecinto").rows[i].cells[j].firstChild;
	   					if (imgActual.src.indexOf('celdaSeleccionada.png') > 0) {
	   						elemSeleccionado = true;
	   						imgActualId = imgActual.id;
	   					}
	   				}
	   			}
	   			
	   			if (elemSeleccionado == false) {
	   				document.getElementById("tablaOpciones").hidden = false;
		   	   		document.getElementById("idImagenActiva").value = elementoId;
		   	   		document.getElementById(elementoId).src = "./imagenes/recintos/celdaSeleccionada.png";
	   			} else if (imgActualId == elementoId){
	   				document.getElementById("tablaOpciones").hidden = true;
	   	   			document.getElementById("idImagenActiva").value = "";
	   	   			document.getElementById(elementoId).src = "./imagenes/recintos/celdaVacia.png";
	   			}
   			}
   		}
   		 
   		function agregarButaca(){
   			<%
   			int numeroCeldas = 0;
   			String nombreRec = "";
   			String butacaJS=request.getParameter("butaca");
   			if (butacaJS != null) {
   				JSONParser parser = new JSONParser();
   				JSONObject jButaca = (JSONObject) parser.parse(butacaJS);
   				int numero = Integer.parseInt((String) jButaca.get("bNumero"));
   				double precio = Double.parseDouble((String) jButaca.get("bPrecio"));
   				String tipo = (String) jButaca.get("bTipo");
   				nombreRec = (String) jButaca.get("bRecinto");
   				int filasRec = Integer.parseInt((String) jButaca.get("rFilas"));
   				int columnasRec = Integer.parseInt((String) jButaca.get("rColumnas"));
   				numeroCeldas = filasRec * columnasRec;
   				Recintos nuevoRecinto = new Recintos(nombreRec, filasRec, columnasRec);
   				session.setAttribute("nuevoRecinto", nuevoRecinto);
   				try {
   					((ArrayList<Butaca>) session.getAttribute("listaButacas")).add(new Butaca(numero, precio, tipo, nombreRec));
   				} catch (NullPointerException e) {
   					ArrayList<Butaca> nuevaLista = new ArrayList<Butaca>();
   					nuevaLista.add(new Butaca(numero, precio, tipo, nombreRec));
   					session.setAttribute("listaButacas", nuevaLista);
   				}
   			}
   			%>
   			for(var i=0; i < document.getElementsByName('tipo').length; i++) {
   				if (document.getElementsByName('tipo')[i].checked == true){
   					if (document.getElementsByName('tipo')[i].value == "Butaca"){
   						document.getElementById(document.getElementById("idImagenActiva").value).src = "./imagenes/recintos/butaca.png";
   					} else if (document.getElementsByName('tipo')[i].value == "Hueco"){
   						document.getElementById(document.getElementById("idImagenActiva").value).src = "./imagenes/recintos/celdaVacia.png";
   					} else if (document.getElementsByName('tipo')[i].value == "Espacio no vendible"){
   						document.getElementById(document.getElementById("idImagenActiva").value).src = "./imagenes/recintos/celdaNoDisponible.png";
   					}
   				}
   			}
   			limpiarDatosButacas();
   		}
   		
   		function guardarRecinto(){
   			if(document.getElementById('nombresRecintos').value.indexOf("," + document.getElementById('nombresRecintos').value + ",") < 0) {
	   			var formulario = document.createElement("form");
	   			formulario.id="formAltaRecinto";
	   			formulario.action="AltaRecinto";
	   			formulario.submit();
   			} else {
   				alert("El nombre de recinto ya existe, por favor introduzca otro nombre");
   			}
   		}
   		
   		function limpiarDatosButacas(){
   			document.getElementById("precio_parte_entera").value = "";
   			document.getElementById("precio_parte_decimal").value = "";
   			for(var i=0; i < document.getElementsByName('tipo').length; i++) {
   				if (document.getElementsByName('tipo')[i].checked == true){
   					document.getElementsByName('tipo')[i].checked = false;
   				}
   			}
   		}
	</script>
</head>
<body>
	<table>
		<tr >
			<td>
				<div class="destacado4">
					Nuevo recinto <br>
	 
				</div>
				
			</td> 
		</tr>
		<tr>
			<td>
				<span style="float: left;">Nombre:</span>
				<input class="text" style="float: left;" type="text" id="nombreRecinto" size="60" maxlength="60"/>
				<input type="text" id="nombresRecintos" hidden="true" value="<%=(String) session.getAttribute("listaNomRecAlmacenados")%>"/>
			</td>
		</tr>
		 <tr>
		</tr>
		 <tr>
			<td> 
				<span style="float: left;">Seleccione el tamaño:</span>
				<select style="float: left;" name="cb_tamanio" onChange="seleccionTamanio(this.value)"> 
				    <option value="-1">Seleccione una opción...</option> 
				    <option value="0">Predefinido</option> 
				    <option value="1">Personalizado</option> 
				</select> 
			</td>
		</tr>
		
		<tr id="recPersonalizado" hidden="true">
			<td>
				<span style="float: left;">Filas:</span>
				<input type="text" class="text" id="filasRecinto" style="float: left;" size="10" maxlength="2" onkeypress="return isNumberKey(this);" onkeyup="pintarRecinto('0','0')"/>
				<span style="float: center;">Columnas:</span>
				<input type="text" class="text" id="columnasRecinto" style="float: center;" size="10" maxlength="2" onkeypress="return isNumberKey(this);" onkeyup="pintarRecinto('0','0')"/>
			</td>
		</tr>
		<tr id="regionRecinto" hidden="true">
			<td>
				<table id="tablaRecinto"></table>
			</td>
			<td>
				<table id="tablaOpciones" hidden="true" border=0>
					<tr>
						<td>
							<input type="radio" name="tipo" value="Butaca" />
							<img src="./imagenes/recintos/butaca.png" />
						</td>
					</tr>
					<tr>
						<td>
							<input type="radio" name="tipo" value="Hueco" />
							<img src="./imagenes/recintos/celdaVacia.png" />
						</td>
					</tr>
					<tr>
						<td>
							<input type="radio" name="tipo" value="Espacio no vendible" />
							<img src="./imagenes/recintos/celdaNoDisponible.png" />
						</td>
					</tr>
					<tr>
						<td>
							<input type="text" id="idImagenActiva" hidden="true" value=""/>
							<span>Precio:
								<input type="text" id="precio_parte_entera" size="4" maxlength="2" onkeypress="return isNumberKey(this);"/> ,
								<input type="text" id="precio_parte_decimal" size="4" maxlength="2" onkeypress="return isNumberKey(this);"/>
								€
							</span>
							<input type="button" value="Guardar Butaca" onclick="almacenarButaca()"/>
						</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<td>
			</td>
			<td>
				<input type="button" value="Aceptar" class="botoncito4" onclick="guardarRecinto()"/>
			</td>
		</tr>
	</table>
</body>
</html>

